<template>
  <el-card>
    <el-row :gutter="4">
      <el-form :inline="true" label-position="left" label-width="100px">
        <el-form-item>
          <el-input
            v-model="searchDto.keywords"
            placeholder="请输入关键字"
            style="width:250px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-s-open" type="primary" @click="clear">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <page-table
      ref="multipleSelection"
      :page-data="pageData"
      :loading="loading"
      :do-get-page-data="getPageData"
    >
      <el-table-column
        prop="id"
        label="编号"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column prop="name" label="任务名称" align="center">
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" align="center">
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" align="center">
      </el-table-column>
      <el-table-column prop="lerderUserName" label="改造牵头人" align="center">
      </el-table-column>
      <el-table-column prop="lerderUserMobile" label="联系电话" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status | keyText("BARRIER_FREE_STATUS") }}</template
        >
      </el-table-column>
      <el-table-column label="管理" width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="详情" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-search"
              @click="detail(scope.row)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </page-table>
  </el-card>
</template>
<script>
export default {
  name: "communityTable",
  created() {
    this.getPageData();
  },
  data() {
    return {
      dateRange: [],
      pageData: {},
      loading: false,
      searchDto: {}
    };
  },
  methods: {
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      tem.startTime = this.dateRange[0];
      tem.endTime = this.dateRange[1];
      this.API.getRemouldVillagePageList(tem).then(ret => {
         if (ret.data) {
          this.pageData = ret.data;
        }
      });
    },
    // 详情
    detail(item) {
      this.$parent.show("communityDetail", item);
    },
    // 查询
    search() {
      this.getPageData();
    },
    //清空
    clear() {
      this.searchDto = {
        keywords: ""
      };
      this.dateRange = [];
      this.getPageData();
    }
  }
};
</script>
